<template>
    <view class="category-detail-container">
        <!-- 顶部导航栏 -->
        <nav-bar title="故事分类·奋斗与成长" :showBack="true"></nav-bar>

        <!-- <view class="nav-bar">
            <view class="back-button" @click="navigateBack">
                <text class="back-icon">←</text>
                <text class="back-text">返回</text>
                <text class="page-title">奋斗与成长</text>
            </view>
        </view> -->

        <!-- 主要内容区 -->
        <scroll-view scroll-y class="main-content">
            <!-- 分类介绍 -->
            <view class="category-intro">
                <view class="category-header">
                    <view class="category-icon">🌱</view>
                    <view class="category-info">
                        <text class="category-title">奋斗与成长</text>
                        <!-- <text class="category-count">38个故事</text> -->
                    </view>
                </view>
                <view class="category-description">
                    <text>关于面对挑战时的努力、自我突破和生命转折点的故事</text>
                </view>
                <view class="category-tags">
                    <text class="category-tag">职业成就</text>
                    <text class="category-tag">逆境</text>
                    <text class="category-tag">重大选择</text>
                </view>
            </view>

            <!-- 筛选标签 -->
            <!-- <scroll-view scroll-x class="filter-tags-scroll" show-scrollbar="false">
                <view class="filter-tags">
                    <view class="filter-tag-item active">
                        <text>全部</text>
                    </view>
                    <view class="filter-tag-item">
                        <text>成就</text>
                    </view>
                    <view class="filter-tag-item">
                        <text>逆境</text>
                    </view>
                    <view class="filter-tag-item">
                        <text>选择</text>
                    </view>
                    <view class="filter-tag-item">
                        <text>转折</text>
                    </view>
                    <view class="filter-tag-item">
                        <text>突破</text>
                    </view>
                </view>
            </scroll-view> -->

            <!-- 故事列表 -->
            <view class="stories-list">
                <!-- 故事项 1 -->
                <view class="story-item" @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=6')">
                    <view class="story-cover">
                        <text class="story-tag">职业成就</text>
                    </view>
                    <view class="story-content">
                        <text class="story-title">从农村到大学</text>
                        <text class="story-excerpt">我是如何从一个贫困山区走出来，成为一名大学教授的...</text>
                        <view class="story-meta">
                            <text class="story-author">张教授</text>
                            <view class="story-stats">
                                <text class="story-views">1.8k阅读</text>
                                <text class="story-likes">156喜欢</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 故事项 2 -->
                <view class="story-item" @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=7')">
                    <view class="story-cover">
                        <text class="story-tag">逆境</text>
                    </view>
                    <view class="story-content">
                        <text class="story-title">病床上的坚持</text>
                        <text class="story-excerpt">在与疾病抗争的日子里，我是如何保持乐观和希望的...</text>
                        <view class="story-meta">
                            <text class="story-author">李大爷</text>
                            <view class="story-stats">
                                <text class="story-views">1.2k阅读</text>
                                <text class="story-likes">110喜欢</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 故事项 3 -->
                <view class="story-item" @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=8')">
                    <view class="story-cover">
                        <text class="story-tag">重大选择</text>
                    </view>
                    <view class="story-content">
                        <text class="story-title">人生的十字路口</text>
                        <text class="story-excerpt">那个改变我一生的决定，以及它带给我的所有意外收获...</text>
                        <view class="story-meta">
                            <text class="story-author">王阿姨</text>
                            <view class="story-stats">
                                <text class="story-views">950阅读</text>
                                <text class="story-likes">87喜欢</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 故事项 4 -->
                <view class="story-item" @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=9')">
                    <view class="story-cover">
                        <text class="story-tag">人生转折</text>
                    </view>
                    <view class="story-content">
                        <text class="story-title">退休后的新生活</text>
                        <text class="story-excerpt">离开工作岗位后，我如何找到了新的人生意义和价值...</text>
                        <view class="story-meta">
                            <text class="story-author">刘爷爷</text>
                            <view class="story-stats">
                                <text class="story-views">820阅读</text>
                                <text class="story-likes">76喜欢</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 故事项 5 -->
                <view class="story-item" @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=10')">
                    <view class="story-cover">
                        <text class="story-tag">自我突破</text>
                    </view>
                    <view class="story-content">
                        <text class="story-title">七十岁学电脑</text>
                        <text class="story-excerpt">年龄从来不是障碍，我如何在晚年掌握了现代科技...</text>
                        <view class="story-meta">
                            <text class="story-author">陈奶奶</text>
                            <view class="story-stats">
                                <text class="story-views">1.1k阅读</text>
                                <text class="story-likes">98喜欢</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue'

export default {
    components: {
        NavBar
    },
    data() {
        return {

        }
    },
    methods: {
        navigateTo(url) {
            uni.navigateTo({
                url: url
            });
        },
        navigateBack() {
            uni.navigateBack();
        }
    },
    methods: {
        navigateTo(url) {
            uni.navigateTo({
                url: url
            });
        },
        navigateBack() {
            uni.navigateBack();
        }
    }
}
</script>

<style>
@import './index.css';

.category-detail-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f8f8f8;
}

/* 导航栏样式 */
.nav-bar {
    padding: 20rpx 30rpx;
    background-color: #359e76;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.back-button {
    display: flex;
    align-items: center;
}

.back-icon {
    font-size: 36rpx;
    margin-right: 10rpx;
}

.back-text {
    font-size: 28rpx;
    margin-right: 20rpx;
}

.page-title {
    font-size: 34rpx;
    font-weight: bold;
}

/* 主内容区样式 */
/* .main-content {
    flex: 1;
    width: calc(100% - 40rpx);
    padding: 20rpx;
} */

/* 分类介绍样式 */
.category-intro {
    background-color: #fff;
    border-radius: 15rpx;
    padding: 25rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.category-header {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
}

.category-icon {
    font-size: 70rpx;
    margin-right: 20rpx;
}

.category-info {
    flex: 1;
}

.category-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 5rpx;
}

.category-count {
    font-size: 24rpx;
    color: #999;
}

.category-description {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
    line-height: 1.5;
}

.category-tags {
    display: flex;
    flex-wrap: wrap;
}

.category-tag {
    font-size: 22rpx;
    color: #359e76;
    background-color: rgba(82, 196, 26, 0.1);
    padding: 6rpx 15rpx;
    border-radius: 20rpx;
    margin-right: 15rpx;
    margin-bottom: 10rpx;
}

/* 筛选标签样式 */
.filter-tags-scroll {
    width: 100%;
    white-space: nowrap;
    margin-bottom: 20rpx;
}

.filter-tags {
    display: inline-flex;
    padding: 10rpx 0;
}

.filter-tag-item {
    display: inline-block;
    padding: 10rpx 25rpx;
    margin-right: 15rpx;
    background-color: #f0f0f0;
    border-radius: 30rpx;
    font-size: 26rpx;
    color: #666;
    transition: all 0.3s;
}

.filter-tag-item.active {
    background-color: #359e76;
    color: #fff;
}

/* 故事列表样式 */
.stories-list {
    display: flex;
    flex-direction: column;
}

.story-item {
    display: flex;
    background-color: #fff;
    border-radius: 15rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.story-cover {
    width: 180rpx;
    height: 180rpx;
    border-radius: 10rpx;
    background-color: #eee;
    margin-right: 20rpx;
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.story-tag {
    position: absolute;
    top: 10rpx;
    left: 10rpx;
    font-size: 20rpx;
    color: #fff;
    background-color: #359e76aa;
    padding: 4rpx 12rpx;
    border-radius: 10rpx;
}

.story-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.story-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
}

.story-excerpt {
    font-size: 26rpx;
    color: #666;
    line-height: 1.5;
    margin-bottom: 15rpx;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.story-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.story-author {
    font-size: 24rpx;
    color: #999;
}

.story-stats {
    display: flex;
}

.story-views,
.story-likes {
    font-size: 22rpx;
    color: #999;
    margin-left: 15rpx;
}
</style>